<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="statics/font/font_3580475_g38aeqiiuc6/iconfont.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="statics/css/myform.css">
    <script src="statics/js/form.js"></script>
    <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=5EGOvGedGxhMBTyIv0Hd2HoDIO1tQDQA"></script> -->
</head>
<body>

<div class="from">
    <div class="from-title">
        <h3 id="from-title">用户注册</h3>
        <p id="title-p">已有账号?请<a href="${pageContext.request.contextPath}/">登录</a></p>
    </div>
    <div class="from-content">
        <form action="${pageContext.request.contextPath}/goRegister.do" method="POST">
            <input type="hidden" id="imgPath" value="${imgPath}">
            <input type="hidden" id="codeImgName" value="${codeImgName}">
            <input type="hidden" id="imgValue" value="${imgValue}">
            <div class="from-input">
                <span class="iconfont icon-yonghuming"></span><input id="acc" class="myinput" type="text" name="acc" placeholder="输入用账号">
            </div>
            <div class="from-input">
                <span class="iconfont icon-yonghuming1"></span><input id="userName" class="myinput" type="text" name="name" placeholder="输入用户名">
            </div>
            <div class="from-input">
                <span class="iconfont icon-mima "></span><input id="pwd" class="myinput" type="password" name="pwd" placeholder="输入密码">
            </div>
<%--            <div class="from-input">--%>
<%--                <span class="iconfont icon-shoujihao "></span><input class="myinput" type="text" placeholder="输入电话">--%>
<%--            </div>--%>
            <div class="from-input">
                <img id="code" src="statics/images/code/75f425d4dc244a02b3adcb56dfea5853.png" class="codeimg"><input id="codeValue" type="text" class="code" placeholder="输入验证码">
            </div>

            <div class="from-input">
                <span id="msg" class="mymsg">${msg}</span>
            </div>
            <div class="from-input">
                <input id="but" class="mybut" type="submit" value="注册">
            </div>
        </form>
    </div>
</div>
</body>
</html>
<style>
    #code{
        cursor: pointer;
    }
</style>
<script >
    //设置基础参数
    var imgPath = $("#imgPath").val()
    var val = $("#imgValue").val()

    //同步
    var register = 0;
    <%-- 设置验证码图片--%>
    function refresh(img){
        //需要动态加载，不能只改变值
        //没有把图片弄进来，也就是虽然有值，但是没有图片对象
        console.log(img)
        $("#code").attr("src",img);
        //发送ajax请求把图片从服务器拿过来
        //还有就是图片本身不能通过http请求找
    }
    //路径应该用相对路径--否则不会加载，值确实改变了 相对路径是地址栏的路径
    // refresh("localhost:8080/order/statics/images"+$("#codeImgName").val())
    // ../../可以跳到根目录下
    refresh("statics/images/code/"+$("#codeImgName").val())
    $("#but").click(function (){
        $("#msg").html('')
        //非空 账号,密码,姓名等
        if ($("#acc").val()==''){
            $("#msg").html("账号不能为空")
            return false
        }
        if ($("#userName").val()==''){
            $("#msg").html("用户名不能为空")
            return false
        }
        if ($("#pwd").val()==''){
            $("#msg").html("密码不能为空")
            return false
        }
        //验证码验证 --还是不要区分大小写了，否则c这种的
        if ($("#codeValue").val().toLowerCase() != val.toLowerCase()){
            $("#msg").html("验证码有误，请重新输入或者点击图片刷新验证码")
            return false
        }
        while(register==0){

        }
        if (register==1){
            return true;
        }
        return false;
    })
    //绑点点击验证码事件，刷新验证码
    $("#code").click(function (){
        $.ajax({
            type:"get",
            url:"codeImg.data",
            data:{
                imgUri:imgPath
            },
            success:function (code){
                if (code!=null){
                    refresh("statics/images/code/"+code.codeImgName)
                    //重新设置验证码的值
                    val = code.imgValue
                }
            }
        })
    })
    //验证用户名唯一:设置为失焦事件
    $("#acc").blur(function (){
        $.ajax({
            type:"get",
            url:"oneAcc.data",
            data:{
                acc:$("#acc").val()
            },
            success:function (code){
                $("#msg").html("")
                console.log(code)
                if (code.nullFlag!=null&&code.acc==null){
                    register = 1
                }
                else{
                    register = 0
                    $("#msg").html("账号不可用")
                }
            }
        })
    })
</script>
<script>
    //发送ajax请求得到验证码

</script>